<template>
	<view>
		<view class="box">
			<view class="shou">
				<view class="shou-box">
					<image src="../../static/sou.png" mode=""></image>
					<input @input="Waybill_lists" type="text" placeholder="请输入搜索">
				</view>
				
			</view>
			<view class="wu" v-if="bond_list.length==0">
				<image src="../../static/wu.png" style="width: 182px; height: 150px; " mode=""></image>
				<p>暂无数据</p>
			</view>
			<view class="kks" v-for="(time,index) in bond_list">
				<view class="jjs">
					<view>
						<view>
							<view>运单编号：{{time.bond_sn}}</view>
							<view>路由：
							<text  > {{lineChild(time.line_child)}} </text>
							</view>
							<view>
								<view>金额：¥{{time.amount || ''}}</view>
								<view>申请时间：{{time.createtime || ''}}</view>
							</view>
							<button 
							  :style="
							  time.status==1?'background:#1890FF;':
							  time.status==2?'background:#FF3838;':
							  time.status==3?'background:#0ACF00;':''
							  "
							  @click="bondDeitail(time.id)">{{statusText(time.status)}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				keyword: '',
				bond_list: [],
				status_text_array: ['','审核中', '已拒绝','已打款'],
			}
		},
		onLoad() {
			this.getBondList();
		},
		methods: {
			getBondList() {
				 
				let data = {
					waybill_sn: this.keyword,
					page: this.page,
				}
				this.$rqt.bond_lists(data).then(res => {
					console.log(res.data.data);
					this.bond_list = res.data.data || [];
					
				})
			},
			statusText(status) {
				let status_text =  this.status_text_array[status];
				return status_text;
			},
			lineChild(linechild) {
				let lines_route = '';
				if (linechild.length ==0) {
					return lines_route;
				}
				lines_route = linechild.map(item => `${item.outlet_name}`).join("-");
				return lines_route;
			},
		},
		computed: {
			 
		},
		filters: {
		
			dateformat: (time) => {
				const date = new Date(time * 1000)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getMinutes()
				// return year + "-" + month + "-" + day + " " + hour +":"+ minute +":" + second
				return year + "-" + month + "-" + day;
		
			},
		},
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped>
	.wu {
		width: 100%;
		text-align: center;
		padding-top: 60px;
		color: #999999;
		font-size: 18px;
		line-height: 40px;
	}

	.kks {
		width: 100%;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		overflow: hidden;
		background: #FFFFFF;
		margin-bottom: 10px;
	}

	.jjs {
		width: 95%;
		margin: 0 auto;
	}

	.jjs>view {}

	.jjs>view>view {
		line-height: 50px;

	}

	.jjs>view>view>view>view {
		float: left;
		width: 50%;
	}

	.jjs>view>view>button {
		color: #fff;
		margin-bottom: 10px;
		background: #1890FF;
	}

	.jjs>view>view>image {
		width: 28px;
		height: 21px;
		margin-right: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 20px;
	}

	.shou {
		width: 100%;
		height: 60px;
		background: #1890FF;
		display: flex;
		align-items: center;
	}

	.shou-box {
		width: 90%;
		margin: 0 auto;
		height: 32px;
		background: #FAFAFA;
		border-radius: 40px;
		display: flex;
		align-items: center;
	}

	.shou-box>image {
		width: 15px;
		height: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>
